<template>
	<view class="address">
		<!-- <scroll-view scroll-y="true" class="box"> -->
			<view class="content">
				<u--form :model="form" ref="uForm" labelWidth="140">
					<u-form-item label="姓名:">
						<u-input v-model="form.name" placeholder="请输入联系人姓名"></u-input>
					</u-form-item>
					<u-line color="#F0F0F0"></u-line>
					<u-form-item label="手机号:">
						<u-input v-model="form.mobile" placeholder="请输入联系方式"></u-input>
					</u-form-item>
					<u-line color="#F0F0F0"></u-line>
					<u-form-item label="地址:">
						<u-input @click="showVisible = true" v-model="address" disabled placeholder="请选择省市县">
						</u-input>
					</u-form-item>
					<u-line color="#F0F0F0"></u-line>
					<u-form-item label="详细地址:">
						<u-input v-model="form.detail" placeholder="请输入您的详细收货地址">
						</u-input>
					</u-form-item>
				</u--form>
			</view>
		<!-- </scroll-view> -->
		<view class="add">
			<view class="text" @click="addAddress">提交</view>
		</view>
		<u-picker @confirm="clickSure" mode="region" v-model="showVisible"></u-picker>
	</view>
</template>

<script>
	import {
		checkStr
	} from '@/common/js/util.js';
	export default {
		data() {
			return {
				showVisible: false,
				form: {
					detail: '',
					name: '',
					mobile: '',
				},
				province: '',
				city: '',
				area: '',

			};
		},
		computed: {
			address() {
				return this.province + this.city + this.area
			}
		},
		methods: {
			clickSure(e) {
				this.province = e.province.label
				this.city = e.city.label
				this.area = e.area.label
				console.log(this.address)
			},

			// 添加收货地址
			addAddress() {
				const {
					name,
					mobile,
					detail
				} = this.form;
				if (name == '') {
					this.$util.msg('请输入联系人姓名')
					return
				}
				if (mobile == '') {
					this.$util.msg('请输入联系方式')
					return
				}
				if (!checkStr(mobile, 'mobile')) {
					this.$util.msg('手机号格式错误!');
					return;
				}
				if (this.address == '') {
					this.$util.msg('请选择地址')
					return
				}
				if (detail == '') {
					this.$util.msg('请输入详细地址')
					return
				}
				this.form.province = this.province
				this.form.city = this.city
				this.form.area = this.area
				// this.$api.addAddress(this.form).then(res => {
				// 	console.log(res)
				// 	if (res.result == '0') {
				// 		this.$util.msg('添加成功');
				// 		this.back();
				// 	} else {
				// 		this.$util.msg(res.resultNote);
				// 	}
				// })
			},
		}
	}
</script>

<style lang="less" scoped>
	.content {
		margin: 20rpx 30rpx;
		background: #FFF;
		border-radius: 20rpx;
		padding: 0 20rpx;
	}

	.add {
		position: absolute;
		bottom: 80rpx;
		left: 50%;
		transform: translateX(-50%);

		.text {
			width: 600rpx;
			height: 88rpx;
			background: linear-gradient(-90deg, #FB5061, #EF253D);
			border-radius: 44rpx;
			font-size: 32rpx;
			color: #F9F9F9;
			text-align: center;
			line-height: 88rpx;
		}

	}
</style>
